As Processing.js offers a tighter integration between Processing sketches and webpages than the traditional applet approach, certain functions that are normally regulated by Processing are left to be handled by the browser. This approach means that certain behaviour that is expected from a sketch may not work without additional "outside the sketch" instructions, for which /* @pjs */ directives must be used. There are two types of directives: directives that tell Processing.js to buffer data that must be available to a sketch when it is run (preload, font), and directives that tell Processing.js how to behave once the sketch is running (crisp, globalKeyEvents, pauseOnBlur).

These directives are in block comment syntax so that they do not interfere with a sketch when it runs as native Processing, but if you do not wish to pollute your source with @pjs directives, you can also store your directives in a separate file, and only call this file on your page:

directives.pde:

/* @pjs crisp="true"; pauseOnBlur="true"; */

html:

<canvas id="sketchcanvas" data-processing-sources="directives.pde mysketch.pde"></canvas>

        
/* @pjs directive="value"; */ 

/* @pjs directive_1="value"; directive_2="value"; ... */

/* @pjs directive_1="value";
        directive_2="value";
        ...
*/

var mySketch = new Processing.Sketch(
  function(p) { p.draw = function(){...}; ... }
);
mySketch.options.crispLines = true;
var myProcessing = new Processing("myCanvas", mySketch);

var pi = new Processing("myCanvas");
pi.externals.sketch.options.crispLines = true;